<style rel="stylesheet/less" scoped lang="less">@import "../../common/style/mixin";

@dir: "edit/";
.menu-group-wrapper {
    /*.submitBtn();*/
}
</style>
<template>
    <div class="menu-group-wrapper ui container segment">
        <div class="ui dividing header">顶级菜单</div>
        <dragLabel v-if="pre_topMenu" :is_auth="is_auth" :draglist="pre_topMenu" type="disable" @setdragList="upTop"></dragLabel>
        <div class="ui dividing header">菜单分组</div>
        <div class="ui menu attached tabular top">
            <a href="javascript:;" class="item" :data-tab="'item_'+ind" @click='current_ind=ind'
               :class="{active:ind==current_ind}" v-for="(g,ind) in top">{{g.title}}</a>
        </div>
        <div v-if="top.length>0" class="ui bottom attached tab segment" :class="{active:ind==current_ind}"
             :data-tab="'item_'+ind" v-for="(g,ind) in top">
            <!-- <groupCom btnTitle='添加分组' :top_id='ind' :attr='fields' :_group_str='group_strs[ind]' :_attr_group_str='attr_strs[ind]'></groupCom> -->
            <groupCom btnTitle='添加分组' :attr_all="attr_all[g.id]" :is_auth="is_auth" :top_id='g.id' :grouped='grouped' :_attr='fieldsAll[g.id]'
                      :_group_str2='mgroup[g.id]?mgroup[g.id].group_str:null'
                      :_attr_group_str2='mgroup[g.id]?mgroup[g.id].attr_group_str:null'></groupCom>
        </div>
        <p class="submitRow" v-if="!is_auth">
            <button v-if="onsubmit" class="ui loading button">Loading</button>
            <button v-else type="button" class="ui button" @click='submit_confirm'>提 交</button>

        </p>
    </div>
</template>

<script type="text/ecmascript-6">
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    import groupCom from 'components/edit/groupCom';
    import dragLabel from 'components/edit/dragLabel';
    import _ from 'lodash'

    export default {
        data() {
            return {
                top: [],
                topMenu: null,
                pre_topMenu: null,
                mgroup: [],
                fields: [],
                grouped: [],
                notGrouped: [],
                fieldsAll: {},
                current_ind: 0,
                onsubmit: false
            }
        },
        methods: {
            upTop(list) {
                this.topMenu = list
            },
            submit_confirm() {
                util.showConfirm(this, () => {
                    this.toSubmit()
                }, {content: '确认提交吗？'});
            },
            toSubmit() {
                let menu_group = this.$store.state.global.menuGroup;
                let vo = {
                    menu_group: JSON.stringify(menu_group),
                };
                if(!this.is_auth)
                    util.store.commit(this,'set_mgroup',{mgroup:menu_group,grouped:this.grouped},'edit');

                this.$set(this.$data, 'onsubmit', true)
                let op = 'upMenugroup';
                let url = tool.getApi(this, 'Post', op);

                util.http.SR(this, url, vo, null, (rs) => {
                    this.upTopMenu()
                    this.$set(this.$data, 'onsubmit', false)
                });

            },
            upTopMenu() {

                let vo = {
                    top_menu: this.topMenu_out
                };

                let op = 'upTopMenu';
                let url = tool.getApi(this, 'Post', op);

                util.http.SR(this, url, vo, '操作成功！', (rs) => {
                    let eventVue = util.store.get(this,'eventVue');
                    eventVue.$emit('upSysInfo')
                    eventVue.$emit('menuUpdate')
                    eventVue.$emit('topMenuUpdate')
                });

            },
            getMenu() {
                let url = tool.getApi(this, 'Editget', 'getMenuFields');
                let menu_auth = this.is_auth ? logic.edit.getEditVo(this, 'menu_auth') : null;
                let param = {
                    is_auth: this.is_auth,
                    menu_group:menu_auth?menu_auth.menu_group:null
                };
                util.getDataCom(this, url, param, (data) => {
                    this.notTop = data.notTop
                    this.grouped = data.grouped
                    this.notGrouped = data.notGrouped
                    this.mgroup = data.mgroup

                    if(!this.is_auth)
                        util.store.commit(this,'set_mgroup',{mgroup:this.mgroup,grouped:this.grouped},'edit');

                    this.top = this.pre_topMenu = data.top

                    if (this.top) {
                        this.top.forEach(item => {
                            this.fieldsAll[item.id] = this.notGrouped.filter(field => {
                                return item.id == field.pid
                            })
                        })
                        // this.groupInit()
                    }

                });
            },
        },
        watch: {
            ctl: function (val, old) {
                if (val != old) {
                }
            },
            menu_auth: function (val, old) {
                if (val && val != old && this.is_auth) {
                    this.$emit('set_menu_auth', val);
                }
            }
        },
        computed: {
            attr_all() {
                let all=_.concat(this.notGrouped, this.grouped);
                let tmp = [];
                this.top.forEach(item => {
                    tmp[item.id] = all.filter(field => {
                        return item.id == field.pid
                    });
                });
                return tmp;
            },
            topMenu_out() {
                if (this.topMenu){
                    let topMenu=this.topMenu.map(item => {
                        return {
                            id: item.id,
                            disable: item.disable
                        }
                    })
                    return !this.is_auth?JSON.stringify(topMenu):topMenu;
                }

                else {
                    return '';
                }
            },
            menu_auth() {
                if (this.is_auth&&this.topMenu_out) {
                    let menu_auth = {
                        menu_group: this.$store.state.global.menuGroup,
                        top_menu: this.topMenu_out
                    };

                    return menu_auth;
                }
                return null;
            },
            ctl() {
                return this.$route.query.ctl;
            },
        },
        props: ['is_auth'],
        components: {
            groupCom,
            dragLabel
        },
        created() {
            this.getMenu();
        },
        mounted() {
        }
    };
</script>
